@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --header-height: 4.5rem;
    --sidebar-width: 20rem;

    --shiki-color-text: theme('colors.white');
    --shiki-token-constant: theme('colors.emerald.300');
    --shiki-token-string: theme('colors.emerald.300');
    --shiki-token-comment: theme('colors.zinc.500');
    --shiki-token-keyword: theme('colors.sky.300');
    --shiki-token-parameter: theme('colors.pink.300');
    --shiki-token-function: theme('colors.violet.300');
    --shiki-token-string-expression: theme('colors.emerald.300');
    --shiki-token-punctuation: theme('colors.zinc.200');

    --color-1: #111;
    --color-2: #333;
    --color-3: #444;
    --color-4: #666;
    --color-5: #888;
    --color-6: #999;
    --color-7: #eaeaead9;
    --color-8: #fafafa;
    --color-9: #ff5555;

    --sciphi-primary: #454eb5;
    --sciphi-secondary: #686fc5;
    --sciphi-accent: #7b4dc6;

    --link: #3b82f6;
    --link-hover: #2b6cb0;

    --header-box-shadow: inset 0 -1px var(--color-2);
    --shadow: 0 0 0 1px var(--color-2);
    --shadow-hover: 0 0 0 1px var(--color-7);

    --sciphi-top-bg: #262a2d;
    --sciphi-bg: #171717;

    --background: #171717;
    --foreground: #3d3935;

    --dark-background: #2c2a2a;
    --dark-foreground: #fafafa;

    --card: #ffffff;
    --card-foreground: #3d3935;

    --dark-card: #2c2a2a;
    --dark-card-foreground: #fafafa;

    --popover: #ffffff;
    --popover-foreground: #3d3935;

    --primary: #454eb5;
    --primary-foreground: #fafafa;

    --secondary: #686fc5;
    --secondary-foreground: #1a1919;

    --muted: #f4f3f3;
    --muted-foreground: #757373;

    --accent: #7b4dc6;
    --accent-foreground: #1a1919;

    --destructive: #ff5555;
    --destructive-foreground: #fafafa;

    --border: #e6e4e4;
    --input: #e6e4e4;
    --ring: #3d3935;

    --radius: 0.5rem;
  }

  .dark {
    --background: #171717;
    --foreground: #fafafa;

    --card: #2c2a2a;
    --card-foreground: #fafafa;

    --popover: #3d3935;
    --popover-foreground: #fafafa;

    --primary: #fafafa;
    --primary-foreground: #1a1919;

    --secondary: #282626;
    --secondary-foreground: #fafafa;

    --muted: #282626;
    --muted-foreground: #a5a3a3;

    --accent: #282626;
    --accent-foreground: #fafafa;

    --destructive: #802020;
    --destructive-foreground: #fafafa;

    --border: #282626;
    --input: #282626;
    --ring: #d6d5d5;
  }
  [inert] ::-webkit-scrollbar {
    display: none;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family:
    'Ubuntu',
    -apple-system,
    sans-serif;
  font-size: 93.75%;
}

a {
  color: inherit;
  text-decoration: none;
}

@layer utilities {
  .debug {
    @apply border-[1px] border-red-500;
  }
}

@keyframes searchingAnimation {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.searching-animation {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffffff 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: searchingAnimation 4s forwards;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-content-wrapper {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  transition: left 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.main-content-wrapper.sidebar-closed {
  left: 0;
}

.main-content {
  width: 100%;
  max-width: 64rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.centered-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mode-selector {
  position: sticky;
  z-index: 10;
}

.prose {
  color: #d4d4d8;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: white;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-bottom: 1em;
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.prose code {
  background-color: #3f3f46;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
}

.prose pre {
  background-color: #27272a;
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
}

.request-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.request-card-content {
  flex: 1;
  min-height: 0;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.table-fixed {
  table-layout: fixed;
}

td > div,
th > div {
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

table {
  table-layout: fixed;
  width: 100%;
}

col.flex-grow {
  width: 1%;
}

th,
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
